<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery.js"></script>
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <script src="swiper/swiper-bundle.min.js"></script>
    <style>
        .swiper{
            width:600px;
            height: 300px;
        }
        img{
            width:600px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
           
        </div>

        <!-- 分页器 -->
        <div class="swiper-pagination "></div>

        <!-- 前后两个按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script>
        let arrs=["imgs/01.png","imgs/02.png","imgs/03.png","imgs/04.png"];

        for(let i=0;i<arrs.length;i++){//循环创建四张图片
            let slide=$("<div class='swiper-slide'><img src='"+arrs[i]+"'></div>");
            $(".swiper-wrapper").append(slide);
        }
        new Swiper(".swiper");
    </script>
</body>
</html>